<template>
  <div>
    <div class="title" style="text-align:left">
      <font-awesome-icon icon="film" />&nbsp;系统角色列表
    </div>
    <div class="block-line">&nbsp;</div>
    <el-table :data="roleData" border width="1200">
      <el-table-column label="角色ID" width="300">
        <template slot-scope="scope">
          <span style="cursor:pointer;" @click="loadActionData(scope.row.rid)">
            {{scope.row.rid}}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="角色标志" width="80" class="text-center">
        <template slot-scope="scope">
          <font-awesome-icon :icon="scope.row.icon" />
        </template>
      </el-table-column>
      <el-table-column prop="title" label="角色名称" width="220"></el-table-column>
      <el-table-column prop="path" label="角色路径" width="550"></el-table-column>
    </el-table>
    <div class="block-line">&nbsp;</div>
    <el-dialog :visible.sync="detailsDialogVisible" width="70%" style="text-align:left" >
      <template slot="title"><div class="dialog-title">
        <font-awesome-icon icon="eye" />&nbsp;查看角色权限列表</div></template>
      <div>
        <el-row>
          <el-col :sm="24">
            <el-table :data="actionData" border width="1200">
              <el-table-column prop="actid" label="权限ID" width="300"/>
              <el-table-column label="权限标志" width="80" class="text-center">
                <template slot-scope="scope">
                  <font-awesome-icon :icon="scope.row.icon" />
                </template>
              </el-table-column>
              <el-table-column prop="title" label="权限名称" width="150"></el-table-column>
              <el-table-column prop="path" label="权限路径" width="500"></el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailsDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="detailsDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { Loading } from 'element-ui'
export default {
  data () {
    return {
      detailsDialogVisible: false, // 弹出对话框显示配置
      userData: [], // 保存角色中的全部用户信息
      actionData: [], // 保存角色中的全部权限信息
      roleData: [] // 保存所有的角色信息
    }
  },
  methods: {
    loadActionData (rid) {
      console.log('****** rid = ' + rid)
      this.detailsDialogVisible = true
      setTimeout(() => {
        this.$back.user.loadAction(rid).then(res => { // 加载新闻数据信息
          this.actionData = res.data // 保存角色列表数据
        })
      }, 200)
    },
    loadRoleData () { // 分页数据加载操作
      let loadingInstance = Loading.service({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
        setTimeout(() => {
          this.$back.user.loadRole().then(res => { // 加载新闻数据信息
            this.roleData = res.data // 保存角色列表数据
          })
          loadingInstance.close()
        }, 200)
      })
    }
  },
  mounted () {
    this.loadRoleData() // 加载用户数据信息
  }
}
</script>
